<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>


<title>json</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet"
	href="../css/ui-lightness/jquery-ui-1.10.4.custom.css" type="text/css"></link>
<link rel="stylesheet" href="../css/ui.jqgrid.css" type="text/css"></link>

<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="../js/jquery.jqGrid.min.js"></script><script type="text/javascript" src="../js/i18n/grid.locale-cn.js"></script></head>
<script type="text/javascript">

 $(function() {
	$("#list").jqGrid({
	url:"getUserList",
	datatype : "json",                                              //请求的数据类型 
		mtype: "POST",                                                  //请求类型 
		//height : 360,                                                   //设置高度     
		
		//autowidth : true,                                               //自动匹配宽度
		                                            // 此属性用来说明当初始化列宽度时候的计算类型
		rowNum : 10,                                                    //每页显示记录数 
		rowList : [ 10, 20, 30 ],                                       //分页选项，可以下拉选择每页显示记录数 
		//数据列各参数信息设置 
		colModel : [  
		             {label:"用户名",  name : "username",   index : "username", editable : true,    editrules: { required:true}}, 
		             {label:"性别",  name : "usersex",   index : "usersex", editable : true,  editrules: { required:true}
		            ,formatter:function(cellvalue, options, rowObject){
	                  if(cellvalue==0) return "男";
		             else return "女";
		             }
		             }, 
		             {label:"年龄",name : "age",  index : "age",editable : true,   editrules:{edithidden:true, required:true,},edittype:"text", hidden:false}
		             ],
	
	//pager : "#list_page",                                         //表格数据关联的分页条，html元素 
		//viewrecords : true,                                            //显示总记录数 
		//这是一个数组，用于设置jqGrid将要向Server传递的参数名称
	    jsonReader: {  
	    	    id:0 ,                                 //相当于设置主键
	            root:"dataList",                                        //Json数据
	                                               //总记录数
	            repeatitems : false     
	        },
	        	 ondblClickRow : function(id) {//双击
          var gr = jQuery("#list").jqGrid('getGridParam', 'selrow');
    if (gr != null)
    //delGridRow   可以替换成删除
      jQuery("#list").jqGrid('editGridRow', gr, {
      	
      
        reloadAfterSubmit : false,
       
      }).trigger('reloadGrid');
   },
        editurl:"upUser",
	    multiselectWidth: 25,                                          //设置多选列宽度     
	    multiselect: false,                                            //可多选，出现多选框     
		caption : "用户列表",                                           //标题
		gridview:true,                                                  //加速显示                                          
	   // sortname: 'userId',                                            //排序字段名 
	    sortorder: "asc",                                              //排序方式：倒序，本例中设置默认按id倒序排序                        
		hidegrid : false
	});
	
	}); 
</script>
<body>
	<table id="list"></table>
	<div id="list_page"></div>



</body>
</html>
